<template>
    <transition name="move">
        <div class="add-content" v-show="visible">
            <i class="el-icon-close icon" @click="close"></i>
            <Crumb name="Financial"></Crumb>
            <div class="content">
                <div class="table-wrapper">
                    <label for="npwp">Upload NPWP</label>
                    <input type="file" id="npwp" v-show="false" @change="fileChange($event,'npwp')">
                    <div class="img-viewer">
                        <img v-if="_customer.npwp" :src="_customer.npwp || ''" width="100%" alt="">
                    </div>
                </div>
                <div class="table-wrapper">
                    <label for="sppkp">Upload SPPKP</label>
                    <input type="file" id="sppkp" v-show="false" @change="fileChange($event,'sppkp')">
                    <div class="img-viewer">
                        <img v-if="_customer.sppkp" :src="_customer.sppkp || ''" width="100%"  alt="">
                    </div>
                </div>
            </div>
            <div class="sub-content">
                <el-button type="primary" @click="submitForm">Submit</el-button>
            </div>
        </div>
    </transition>
</template>

<script>
    import {ERROR_OK} from "../../util/config";
    import {upLoadFiles} from "../../api";
    import {modCustomer} from "../../api/customer";

    export default {
        name: "finance",
        props: {
            visible: Boolean,
            customer:{
                type:Object,
                default: () => ({
                    npwp:'',
                    sppkp:'',
                    customerName: '',
                    customerLevel: '',
                    area: ''
                })
            }
        },
        data() {
            return {
                _customer:{
                    npwp:'',
                    sppkp:'',
                    customerName: '',
                    customerLevel: '',
                    area: ''
                }
            }
        },
        methods: {
            close() {
                this.$emit('close')
            },
            async submitForm(){
                const c = this._customer;
                const customer = {
                    belongModule:c.belongModule,
                    customerId:c.customerId,
                    npwp:c.npwp || '',
                    sppkp:c.sppkp || '',
                    customerName: c.customerName,
                    customerLevel: c.customerLevel,
                    area: c.area
                };
                const {status} = await modCustomer(customer);
                if (status === ERROR_OK) {
                    this.$notify.success('Modify successfully');
                } else {
                    this.$notify.error('Error,please retry')
                }
            },
            async fileChange(e, label) {
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item => {
                    formData.append('upload_file', item)
                });
                const {success, file_path} = await upLoadFiles(formData);
                if (success) {
                    this.$set(this._customer, label, file_path[0])
                }
                e.target.value = '';
            },

        },
        watch: {
            customer(c){
                if(c) {
                    this._customer = c
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .add-content {
        text-align: left;
        position: fixed;
        padding: 20px;
        z-index: 101;
        top: 0;
        right: 10px;
        bottom: 0;
        overflow: scroll;
        left: 10px;
        background: #fff;
        .table-wrapper{
            text-align: center;
            width: 50%;
            display: inline-block;
            vertical-align: top;
        }
        label{
            width: 200px;
            height: 30px;
            line-height: 30px;
            border-radius: 20px;
            padding: 0 15px;
            border: 1px solid #3a8ee6;
            color: #3a8ee6;
            cursor: pointer;
            transition: all .5s ease;
            &:hover{
                background: #3a8ee6;
                color: white;
            }
        }
        .sub-content{
            text-align: center;
        }
        .img-viewer{
            overflow: hidden;
            width: 500px;
            height: 400px;
            margin: 20px 0;
            margin-left: 50%;
            transform: translateX(-50%);
            border: 1px solid #3a8ee6;
            box-shadow: 5px 2px 6px #999;
        }
        .icon {
            position: absolute;
            font-size: 30px;
            right: 30px;
            top: 10px;
            font-weight: 800;
            color: #409eff;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
            &:hover {
                transform: rotate(90deg);
            }
        }
        &.move-enter-active, &.move-leave-active {
            transition: all 0.5s ease;
        }
        &.move-enter, &.move-leave-to {
            transform: translateX(100%);
        }
    }
</style>